<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地块管理 - 新疆奎木星测控技术有限公司</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #333;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .toolbar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        .statistics-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #333;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.8;
        }
        .field-status {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-planted { background-color: #67C23A; }
        .status-idle { background-color: #E6A23C; }
        .status-preparing { background-color: #409EFF; }
        .status-harvested { background-color: #909399; }
        .crop-tag {
            margin: 2px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>地块管理</h1>
            <p>农田地块信息管理与种植数据统计平台</p>
        </div>
        
        <div class="container">
            <!-- 统计卡片 -->
            <div class="statistics-cards">
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalFields }}</div>
                    <div class="stat-label">地块总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalArea.toFixed(2) }}</div>
                    <div class="stat-label">总面积(亩)</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.plantedFields }}</div>
                    <div class="stat-label">已种植地块</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.idleFields }}</div>
                    <div class="stat-label">闲置地块</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.avgYield.toFixed(2) }}</div>
                    <div class="stat-label">平均亩产(公斤)</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalYield.toFixed(2) }}</div>
                    <div class="stat-label">总产量(吨)</div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="search-form">
                    <el-input
                        v-model="searchForm.keyword"
                        placeholder="搜索地块编号、农户姓名"
                        style="width: 250px;"
                        clearable
                        @input="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                    <el-select v-model="searchForm.village" placeholder="选择村/连" style="width: 150px;" clearable @change="handleSearch">
                        <el-option v-for="village in villageOptions" :key="village.id" :label="village.name" :value="village.id"></el-option>
                    </el-select>
                    <el-select v-model="searchForm.status" placeholder="选择状态" style="width: 120px;" clearable @change="handleSearch">
                        <el-option label="已种植" value="planted"></el-option>
                        <el-option label="闲置" value="idle"></el-option>
                        <el-option label="准备中" value="preparing"></el-option>
                        <el-option label="已收获" value="harvested"></el-option>
                    </el-select>
                    <el-select v-model="searchForm.cropType" placeholder="选择作物类型" style="width: 150px;" clearable @change="handleSearch">
                        <el-option v-for="crop in cropTypeOptions" :key="crop" :label="crop" :value="crop"></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="showAddDialog">新增地块</el-button>
                    <el-button type="success" @click="exportData">导出数据</el-button>
                    <el-button type="warning" @click="batchOperation">批量操作</el-button>
                </div>
            </div>
            
            <!-- 数据表格 -->
            <div class="data-card">
                <el-table :data="filteredFields" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="field_code" label="地块编号" width="120"></el-table-column>
                    <el-table-column prop="farmer_name" label="农户姓名" width="100"></el-table-column>
                    <el-table-column prop="village_name" label="所属村/连" width="120"></el-table-column>
                    <el-table-column prop="area" label="面积(亩)" width="100">
                        <template #default="scope">
                            <span>{{ scope.row.area.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="location" label="地理位置" width="200"></el-table-column>
                    <el-table-column prop="soil_type" label="土壤类型" width="100"></el-table-column>
                    <el-table-column prop="irrigation_type" label="灌溉方式" width="100"></el-table-column>
                    <el-table-column prop="current_crop" label="当前作物" width="120">
                        <template #default="scope">
                            <el-tag v-if="scope.row.current_crop" class="crop-tag" type="success">
                                {{ scope.row.current_crop }}
                            </el-tag>
                            <span v-else style="color: #909399;">未种植</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="planting_date" label="种植日期" width="120"></el-table-column>
                    <el-table-column prop="expected_harvest" label="预计收获" width="120"></el-table-column>
                    <el-table-column prop="yield_per_mu" label="亩产(公斤)" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.yield_per_mu">{{ scope.row.yield_per_mu.toFixed(2) }}</span>
                            <span v-else style="color: #909399;">-</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <span class="field-status" :class="'status-' + scope.row.status"></span>
                            {{ getStatusText(scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="150"></el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
                            <el-button size="small" type="primary" @click="editField(scope.row)">编辑</el-button>
                            <el-button size="small" type="warning" @click="manageCrop(scope.row)">种植</el-button>
                            <el-button size="small" type="danger" @click="deleteField(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px; text-align: right;"
                >
                </el-pagination>
            </div>
        </div>
        
        <!-- 新增/编辑地块对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="800px"
            @close="resetForm"
        >
            <el-form :model="fieldForm" :rules="formRules" ref="fieldFormRef" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="地块编号" prop="field_code">
                            <el-input v-model="fieldForm.field_code" placeholder="请输入地块编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="农户" prop="farmer_id">
                            <el-select v-model="fieldForm.farmer_id" placeholder="选择农户" filterable>
                                <el-option v-for="farmer in farmerOptions" :key="farmer.id" :label="farmer.name" :value="farmer.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="所属村/连" prop="village_id">
                            <el-select v-model="fieldForm.village_id" placeholder="选择村/连">
                                <el-option v-for="village in villageOptions" :key="village.id" :label="village.name" :value="village.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="面积(亩)" prop="area">
                            <el-input-number v-model="fieldForm.area" :min="0" :precision="2" placeholder="请输入面积"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="地理位置" prop="location">
                    <el-input v-model="fieldForm.location" placeholder="请输入地理位置描述"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="经度" prop="longitude">
                            <el-input-number v-model="fieldForm.longitude" :precision="6" placeholder="经度"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="纬度" prop="latitude">
                            <el-input-number v-model="fieldForm.latitude" :precision="6" placeholder="纬度"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="海拔(米)" prop="altitude">
                            <el-input-number v-model="fieldForm.altitude" :precision="0" placeholder="海拔"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="土壤类型" prop="soil_type">
                            <el-select v-model="fieldForm.soil_type" placeholder="选择土壤类型">
                                <el-option v-for="soil in soilTypeOptions" :key="soil" :label="soil" :value="soil"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="灌溉方式" prop="irrigation_type">
                            <el-select v-model="fieldForm.irrigation_type" placeholder="选择灌溉方式">
                                <el-option v-for="irrigation in irrigationOptions" :key="irrigation" :label="irrigation" :value="irrigation"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="当前作物" prop="current_crop">
                            <el-select v-model="fieldForm.current_crop" placeholder="选择当前作物" clearable>
                                <el-option v-for="crop in cropTypeOptions" :key="crop" :label="crop" :value="crop"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="fieldForm.status" placeholder="选择状态">
                                <el-option label="已种植" value="planted"></el-option>
                                <el-option label="闲置" value="idle"></el-option>
                                <el-option label="准备中" value="preparing"></el-option>
                                <el-option label="已收获" value="harvested"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="种植日期" prop="planting_date">
                            <el-date-picker v-model="fieldForm.planting_date" type="date" placeholder="选择种植日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预计收获" prop="expected_harvest">
                            <el-date-picker v-model="fieldForm.expected_harvest" type="date" placeholder="选择预计收获日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="fieldForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-form>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveField">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            data() {
                return {
                    loading: false,
                    dialogVisible: false,
                    isEdit: false,
                    selectedFields: [],
                    // 搜索表单
                    searchForm: {
                        keyword: '',
                        village: '',
                        status: '',
                        cropType: ''
                    },
                    // 统计数据
                    statistics: {
                        totalFields: 3456,
                        totalArea: 125678.90,
                        plantedFields: 2890,
                        idleFields: 566,
                        avgYield: 485.67,
                        totalYield: 6098.45
                    },
                    // 选项数据
                    villageOptions: [
                        { id: 1, name: '第一村' },
                        { id: 2, name: '第二村' },
                        { id: 3, name: '第三村' },
                        { id: 4, name: '第一连' },
                        { id: 5, name: '第二连' },
                        { id: 6, name: '第三连' }
                    ],
                    farmerOptions: [
                        { id: 1, name: '张三' },
                        { id: 2, name: '李四' },
                        { id: 3, name: '王五' },
                        { id: 4, name: '赵六' },
                        { id: 5, name: '钱七' }
                    ],
                    cropTypeOptions: ['小麦', '玉米', '大豆', '水稻', '高粱', '棉花', '向日葵'],
                    soilTypeOptions: ['黑土', '黄土', '红土', '沙土', '粘土', '壤土'],
                    irrigationOptions: ['滴灌', '喷灌', '漫灌', '沟灌', '微喷', '自然降水'],
                    // 地块数据
                    fields: [
                        {
                            id: 1,
                            field_code: 'DK001',
                            farmer_id: 1,
                            farmer_name: '张三',
                            village_id: 1,
                            village_name: '第一村',
                            area: 15.67,
                            location: '第一村东北角',
                            longitude: 87.123456,
                            latitude: 43.654321,
                            altitude: 850,
                            soil_type: '黑土',
                            irrigation_type: '滴灌',
                            current_crop: '小麦',
                            planting_date: '2024-03-15',
                            expected_harvest: '2024-07-20',
                            yield_per_mu: 485.67,
                            status: 'planted',
                            created_at: '2024-01-15 09:30:00',
                            remarks: '优质地块，土壤肥沃'
                        },
                        {
                            id: 2,
                            field_code: 'DK002',
                            farmer_id: 2,
                            farmer_name: '李四',
                            village_id: 2,
                            village_name: '第二村',
                            area: 23.45,
                            location: '第二村南侧',
                            longitude: 87.234567,
                            latitude: 43.543210,
                            altitude: 820,
                            soil_type: '壤土',
                            irrigation_type: '喷灌',
                            current_crop: '玉米',
                            planting_date: '2024-04-10',
                            expected_harvest: '2024-09-15',
                            yield_per_mu: 520.34,
                            status: 'planted',
                            created_at: '2024-01-16 10:15:00',
                            remarks: '地势平坦，适合机械化作业'
                        },
                        {
                            id: 3,
                            field_code: 'DK003',
                            farmer_id: 3,
                            farmer_name: '王五',
                            village_id: 4,
                            village_name: '第一连',
                            area: 8.90,
                            location: '第一连西北角',
                            longitude: 87.345678,
                            latitude: 43.432109,
                            altitude: 780,
                            soil_type: '沙土',
                            irrigation_type: '滴灌',
                            current_crop: null,
                            planting_date: null,
                            expected_harvest: null,
                            yield_per_mu: null,
                            status: 'idle',
                            created_at: '2024-01-17 08:45:00',
                            remarks: '待改良土壤后种植'
                        }
                    ],
                    // 表单数据
                    fieldForm: {
                        id: null,
                        field_code: '',
                        farmer_id: '',
                        village_id: '',
                        area: null,
                        location: '',
                        longitude: null,
                        latitude: null,
                        altitude: null,
                        soil_type: '',
                        irrigation_type: '',
                        current_crop: '',
                        planting_date: '',
                        expected_harvest: '',
                        status: 'idle',
                        remarks: ''
                    },
                    // 表单验证规则
                    formRules: {
                        field_code: [{ required: true, message: '请输入地块编号', trigger: 'blur' }],
                        farmer_id: [{ required: true, message: '请选择农户', trigger: 'change' }],
                        village_id: [{ required: true, message: '请选择村/连', trigger: 'change' }],
                        area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
                        location: [{ required: true, message: '请输入地理位置', trigger: 'blur' }],
                        soil_type: [{ required: true, message: '请选择土壤类型', trigger: 'change' }],
                        irrigation_type: [{ required: true, message: '请选择灌溉方式', trigger: 'change' }],
                        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
                    },
                    // 分页数据
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 3
                    }
                };
            },
            
            computed: {
                dialogTitle() {
                    return this.isEdit ? '编辑地块' : '新增地块';
                },
                
                filteredFields() {
                    let filtered = this.fields;
                    
                    if (this.searchForm.keyword) {
                        filtered = filtered.filter(item => 
                            item.field_code.includes(this.searchForm.keyword) || 
                            item.farmer_name.includes(this.searchForm.keyword)
                        );
                    }
                    
                    if (this.searchForm.village) {
                        filtered = filtered.filter(item => item.village_id === this.searchForm.village);
                    }
                    
                    if (this.searchForm.status) {
                        filtered = filtered.filter(item => item.status === this.searchForm.status);
                    }
                    
                    if (this.searchForm.cropType) {
                        filtered = filtered.filter(item => item.current_crop === this.searchForm.cropType);
                    }
                    
                    return filtered;
                }
            },
            
            methods: {
                /**
                 * 获取状态文本
                 */
                getStatusText(status) {
                    const statusMap = {
                        'planted': '已种植',
                        'idle': '闲置',
                        'preparing': '准备中',
                        'harvested': '已收获'
                    };
                    return statusMap[status] || '未知';
                },
                
                /**
                 * 搜索处理
                 */
                handleSearch() {
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 重置搜索
                 */
                resetSearch() {
                    this.searchForm = {
                        keyword: '',
                        village: '',
                        status: '',
                        cropType: ''
                    };
                    this.handleSearch();
                },
                
                /**
                 * 处理选择变化
                 */
                handleSelectionChange(selection) {
                    this.selectedFields = selection;
                },
                
                /**
                 * 显示新增对话框
                 */
                showAddDialog() {
                    this.isEdit = false;
                    this.dialogVisible = true;
                },
                
                /**
                 * 查看详情
                 */
                viewDetails(row) {
                    ElMessage.info(`查看地块 ${row.field_code} 的详细信息`);
                },
                
                /**
                 * 编辑地块
                 */
                editField(row) {
                    this.isEdit = true;
                    this.fieldForm = { ...row };
                    this.dialogVisible = true;
                },
                
                /**
                 * 管理种植
                 */
                manageCrop(row) {
                    ElMessage.info(`管理地块 ${row.field_code} 的种植信息`);
                },
                
                /**
                 * 删除地块
                 */
                deleteField(row) {
                    ElMessageBox.confirm(
                        `确定要删除地块 ${row.field_code} 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        const index = this.fields.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.fields.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                },
                
                /**
                 * 保存地块
                 */
                saveField() {
                    this.$refs.fieldFormRef.validate((valid) => {
                        if (valid) {
                            if (this.isEdit) {
                                // 编辑模式
                                const index = this.fields.findIndex(item => item.id === this.fieldForm.id);
                                if (index > -1) {
                                    const farmer = this.farmerOptions.find(f => f.id === this.fieldForm.farmer_id);
                                    const village = this.villageOptions.find(v => v.id === this.fieldForm.village_id);
                                    this.fields[index] = { 
                                        ...this.fieldForm,
                                        farmer_name: farmer ? farmer.name : '',
                                        village_name: village ? village.name : ''
                                    };
                                    ElMessage.success('更新成功');
                                }
                            } else {
                                // 新增模式
                                const farmer = this.farmerOptions.find(f => f.id === this.fieldForm.farmer_id);
                                const village = this.villageOptions.find(v => v.id === this.fieldForm.village_id);
                                const newField = {
                                    ...this.fieldForm,
                                    id: Date.now(),
                                    farmer_name: farmer ? farmer.name : '',
                                    village_name: village ? village.name : '',
                                    yield_per_mu: null,
                                    created_at: new Date().toLocaleString()
                                };
                                this.fields.push(newField);
                                ElMessage.success('新增成功');
                            }
                            this.dialogVisible = false;
                            this.resetForm();
                        }
                    });
                },
                
                /**
                 * 重置表单
                 */
                resetForm() {
                    this.fieldForm = {
                        id: null,
                        field_code: '',
                        farmer_id: '',
                        village_id: '',
                        area: null,
                        location: '',
                        longitude: null,
                        latitude: null,
                        altitude: null,
                        soil_type: '',
                        irrigation_type: '',
                        current_crop: '',
                        planting_date: '',
                        expected_harvest: '',
                        status: 'idle',
                        remarks: ''
                    };
                    if (this.$refs.fieldFormRef) {
                        this.$refs.fieldFormRef.resetFields();
                    }
                },
                
                /**
                 * 导出数据
                 */
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                /**
                 * 批量操作
                 */
                batchOperation() {
                    if (this.selectedFields.length === 0) {
                        ElMessage.warning('请先选择要操作的地块');
                        return;
                    }
                    ElMessage.info(`已选择 ${this.selectedFields.length} 个地块，批量操作功能开发中...`);
                },
                
                /**
                 * 处理每页显示数量变化
                 */
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 处理当前页码变化
                 */
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                }
            },
            
            mounted() {
                // 页面加载完成后的初始化操作
                this.pagination.total = this.fields.length;
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>